<template>
  <div class="matchList">
    <div class="br-b">
      <mt-navbar v-model="selected">
        <mt-tab-item
          v-for="(obj,index) in tabList"
          :id="obj.id"
          :key="index"
        >
          <div @click="tabClick(obj.type,obj.id,index)">{{obj.name}}</div>
        </mt-tab-item>
      </mt-navbar>
    </div>
    <!-- tab-container -->
    <mt-tab-container>
      <mt-tab-container-item>
        <div
          ref="wrapper"
          :style="{ height: wrapperHeight + 'px' }"
          style="overflow-y:auto;"
        >
          <mt-loadmore
            :top-method="loadTop"
            ref="loadmore"
            :autoFill="false"
          >

            <ul
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="0"
            >
              <li
                v-for="obj in list"
                :key="obj.name"
                class="list-wrap bg-fff"
                v-if="type==1"
                @click='goDetail(obj.id)'
              >
                <div
                  style="padding:0.2rem 0.4rem"
                  class="c-flex br-b"
                >
                  <div class="pic">
                    <img
                      :src="'http://img.wangyuhudong.com/'+obj.icon"
                      alt=""
                    >
                  </div>
                  <div
                    class="c-box-flex"
                    style="position: relative"
                  >
                    <div class="title text-hidden">{{obj.title}}</div>
                    <div class="content">{{obj.brief}}</div>
                    <div
                      class="c-flex"
                      style="position: absolute;right:0;bottom:0"
                    >
                      <div class="c-box-flex">
                      </div>
                      <div class="btn br-1">{{(obj.read_num/10000).toFixed(2)}}W阅读量</div>
                    </div>
                  </div>
                </div>
              </li>

              <li
                class="list-wrap"
                v-if="type==2"
              >
                <div
                  style="padding:0 0.3rem;flex-wrap:wrap"
                  class="c-flex br-b"
                >
                  <div
                    v-for="(obj,index) in list"
                    :key="obj.name"
                    @click='goDetail(obj.id)'
                    class="video-cell-wrap"
                    :style="{'paddingRight':index%2==0?'0.2rem':0,'paddingLeft':index%2!=0?'0.2rem':0}"
                  >
                    <div class="cell">
                      <div style="width:100%;height:2.1rem;background:#aaa;border-radius:0.1rem 0.1rem 0 0;">
                        <img
                          :src="'http://img.wangyuhudong.com/'+obj.icon"
                          alt=""
                          style="width:100%;height:2.1rem;"
                        >
                      </div>
                      <div style="padding:0.1rem;border-radius:0 0 0.1rem 0.1rem;">
                        <div
                          class="c-333 fs20 text-hidden"
                          style="line-height:0.24rem"
                        >{{obj.title}}</div>
                        <div class="c-flex c-999 fs18 c-a-c mt20">
                          <div class="c-box-flex text-hidden">{{obj.time}}</div>
                          <div><i class="iconfont icon-shipin fs18"></i> {{obj.read_num}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li
                v-for="obj in list"
                :key="obj.name"
                class="list-wrap"
                v-if="type==3"
                @click='goDetail(obj.id)'
              >
                <div
                  style="padding:0.2rem 0.3rem"
                  class="c-flex br-b"
                >
                  <div
                    style="width:100%;height:2.4rem;position:relative;border-radius:0.06rem"
                    :style="{backgroundImage: 'url(http://img.wangyuhudong.com/' + obj.icon + ')', backgroundSize:'cover'}"
                  >
                    <div
                      style="position: absolute;left:0.1rem;bottom:0.1rem"
                      class="c-fff fs20 c-flex c-a-c"
                    >
                      <i class="iconfont icon-yulan"></i>
                      <div class="ml10">{{(obj.read_num/10000).toFixed(2)}}W人浏览</div>
                      <div class="ml10">{{obj.childrenCount}}篇文章</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>

          </mt-loadmore>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>

    <div class="c-flex c-j-c loading">
      <p
        v-show="loading"
        class="page-infinite-loading"
      >
        <mt-spinner
          type="fading-circle"
          color="#fff"
          :size="30"
        ></mt-spinner>
        加载中...
      </p>
    </div>
    <div
      class="mask"
      v-show="loading"
    ></div>
  </div>
</template>

<script>
export default {
  name: "inforList",
  data() {
    return {
      selected: "",
      list: [],
      loading: false,
      allLoaded: false,
      wrapperHeight: 0,

      type: 1,
      tabList: [],
      page: 1,
      pageSize: 10,
      isLast: false,
      ActiveId: null
    };
  },
  mounted() {
    document.title = "资讯";
    this.getCategory();
  },
  methods: {
    //切换tab
    tabClick(type, id, index) {
      this.wrapperHeight =
        document.documentElement.clientHeight -
        this.$refs.wrapper.getBoundingClientRect().top;
      this.page = 1;
      this.type = type;
      this.ActiveId = id;
      this.list = [];
      this.$root.tabIndex = index;
      this.$nextTick(() => {
        this.getList(this.page, this.pageSize, this.ActiveId);
      });
    },
    loadMore() {
      if (!!this.isLast) {
        return false;
      }

      this.loading = true;
      this.page = ++this.page;
      this.$nextTick(() => {
        this.getList(this.page, this.pageSize, this.ActiveId);
      });
    },
    //获取资讯目录
    getCategory() {
      this.axios
        .get("invoking/invokingDy")
        .then(res => {
          console.log(res.data);
          if (res.data.code == 0) {
            if (JSON.stringify(res.data.object) != "[]") {
              if (!!this.$root.tabIndex) {
                this.selected = res.data.object[this.$root.tabIndex].parent.id;
                this.tabClick(
                  res.data.object[this.$root.tabIndex].parent.type,
                  res.data.object[this.$root.tabIndex].parent.id
                );
              } else {
                this.selected = res.data.object[0].parent.id;
                this.tabClick(
                  res.data.object[0].parent.type,
                  res.data.object[0].parent.id
                );
              }
              res.data.object.map((obj, i) => {
                this.tabList.push(obj.parent);
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取资讯列表
    getList(page, pageSize, id, type) {
      if (type != "loadTop") {
        this.loading = true;
      }
      this.axios
        .post("invoking/invokingLB", {
          page: page,
          pageSize: pageSize,
          id: id,
          pid: 0
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 0) {
            this.isLast = !!res.data.object.information.isLast;
            if (JSON.stringify(res.data.object.information.list) != "[]") {
              this.list = this.list.concat(res.data.object.information.list);
              this.loading = false;
              if (type == "loadTop") {
                this.$refs.loadmore.onTopLoaded();
              }
            }
            console.log(this.list);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadTop() {
      this.page = 1;
      this.list = [];
      this.$nextTick(() => {
        this.getList(this.page, this.pageSize, this.ActiveId, "loadTop");
      });
    },
    //跳转详情页面
    goDetail(id) {
      console.log(this.$root.tabIndex);
      switch (this.type) {
        case 1:
          this.$router.push({ path: "/articleListDetail", query: { id: id } });
          break;
        case 2:
          this.$router.push({ path: "/videoList", query: { id: id } });
          break;
        case 3:
          this.$router.push({ path: "/articleList", query: { id: id } });
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.pic {
  width: 1.8rem;
  height: 1.78rem;
  background: #f6f6f6;
  margin-right: 0.3rem;

  img {
    width: 1.8rem;
    height: 1.78rem;
  }
}

.title {
  font-size: 0.3rem;
  color: #333;
  margin: 0.1rem 0;
}

.content {
  font-size: 0.2rem;
  color: #999;
  line-height: 0.36rem;
}

.btn {
  padding: 0 0.2rem;
  color: #d2d2d2;
  &:after {
    border-radius: 1rem;
  }
}

.video-cell-wrap {
  width: 50%;
  .cell {
    width: 100%;
    height: 3.25rem;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    background: #fff;
    box-shadow: 0px 2px 5px 1px rgba(199, 199, 199, 0.2);
  }
}


</style>


<style lang="less">
.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.matchList {
  .mint-navbar {
    width: 100%;
    overflow-x: auto;
  }

  .mint-tab-item {
    font-size: 0.28rem;
    padding: 0.3rem 0;
  }
  .mint-tab-item-label {
    font-size: 0.28rem;
    width: 1.6rem;
  }

  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #ffc031;
    color: #ffc031;
    margin-bottom: -0px;
  }
}
</style>
